<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home/Home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>Docker主机列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 主页信息 -->
        <el-card class="cardBox">
            <!-- 标题 -->
            <div slot="header" class="clearfix">
                <span style="font-weight: bold; font-size: large;">主机列表</span>
            </div>
            <!-- 统计信息 -->
            <el-row>
                <el-col :span="6">
                    <el-statistic title="总主机数" :value="baseInfo.total" />
                </el-col>
                <el-col :span="6">
                    <el-statistic title="存活主机数" :value="baseInfo.alives" />
                </el-col>
                <el-col :span="6">
                    <el-statistic :value="baseInfo.alives">
                        <template #title>
                            <div style="display: inline-flex; align-items: center">
                                存活状态
                                <el-icon style="margin-left: 4px" :size="12">
                                    <Male />
                                </el-icon>
                            </div>
                        </template>
                        <template #suffix>/</template>
                    </el-statistic>
                </el-col>
                <el-col :span="6">
                    <el-statistic title="心跳次数" :value="baseInfo.taskTimes">
                        <template #suffix>
                            <div style="font-size: 5px; margin-top: 5px;">times</div>
                        </template>
                    </el-statistic>
                </el-col>
            </el-row>
            <el-divider />
            <!-- 主机列表 -->
            <div>
                <!-- bug：如果没有主机，页面刷新不出来 -->
                <el-table height="630px"
                    :data="baseInfo.dockerInfos.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()) || !data)"
                    style="width: 100%">
                    <el-table-column fixed prop="status" label="主机状态" width="100" :filters="[{
                        text: '存活', value: 'alive'
                    }, { text: '掉线', value: 'dead' }]" :filter-method="filterStatus" filter-placement="bottom-end">
                        <template #default="scope">
                            <el-tag :type="scope.row.status === 'alive' ? '' : 'success'" disable-transitions>{{
                                scope.row.status
                            }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建日期" width="160" sortable />
                    <el-table-column prop="type" label="类型" width="80" />
                    <el-table-column prop="name" label="名称" width="130" />
                    <el-table-column prop="host" label="主机地址" width="130" />
                    <el-table-column prop="port" label="主机端口" width="80" />
                    <el-table-column prop="username" label="账号" width="80" />
                    <el-table-column prop="password" label="密码" />
                    <el-table-column align="right" width="340">
                        <template #header>
                            <el-row>
                                <el-col :span="17">
                                    <el-input v-model="search" size="small" placeholder="查询主机" />
                                </el-col>
                                <el-col :span="7">
                                    <el-button size="small" type="success" @click="addDrawer.show = true"
                                        icon="el-icon-circle-plus-outline">新增</el-button>
                                </el-col>
                            </el-row>
                        </template>
                        <template #default="scope">
                            <el-button size="mini" class="btnSty" type="info" icon="el-icon-edit"
                                @click="editDocker(scope.row)">编辑</el-button>
                            <el-button size="mini" class="btnSty" type="primary" icon="el-icon-refresh"
                                @click="pingClient(scope.row)">测试</el-button>
                            <el-button size="mini" class="btnSty" type="success" icon="el-icon-tickets"
                                @click="openOne(scope.row)">管理</el-button>
                            <el-button size="mini" class="btnSty" type="danger" icon="el-icon-delete"
                                @click="deleteOne(scope.row.key)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
        <!-- 添加窗口 -->
        <el-drawer title="新增一台Docker主机!" :before-close="handleClose" :visible.sync="addDrawer.show" direction="rtl">
            <div>
                <el-form :model="addDrawer.form" label-width="120px">
                    <el-form-item label="主机名称：" style="width: 80%;">
                        <el-input v-model="addDrawer.form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="主机链接地址：" style="width: 80%;">
                        <el-col :span="12">
                            <el-input v-model="addDrawer.form.host" style="width: 90%;"></el-input>
                        </el-col>
                        <el-col :span="4">
                            端口：
                        </el-col>
                        <el-col :span="8">
                            <el-input v-model="addDrawer.form.port"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="账号：" style="width: 80%;">
                        <el-input v-model="addDrawer.form.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码：" style="width: 80%;">
                        <el-input v-model="addDrawer.form.password"></el-input>
                    </el-form-item>
                    <el-form-item label="类型：" style="width: 80%;">
                        <el-radio-group v-model="addDrawer.form.type">
                            <el-radio label="远程">远程</el-radio>
                            <el-radio label="本地">本地</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <div class="demo-drawer__footer" style="position: fixed;bottom: 10px;right: 20px;">
                    <el-button @click="addDrawer.show = false">取 消</el-button>
                    <el-button type="primary" @click="addOne" :loading="loading">{{ loading ? '提交中 ...'
                        : '添 加' }}</el-button>
                </div>
            </div>
        </el-drawer>
        <!-- 修改窗口 -->
        <el-drawer title="修改这台Docker主机！" :before-close="handleClose" :visible.sync="updateDrawer.show" direction="rtl">
            <div>
                <el-form :model="updateDrawer.form" label-width="120px">
                    <el-form-item label="创建日期：" style="width: 80%;">
                        <el-input v-model="updateDrawer.form.createTime" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="主机名称：" style="width: 80%;">
                        <el-input v-model="updateDrawer.form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="主机链接地址：" style="width: 80%;">
                        <el-col :span="12">
                            <el-input v-model="updateDrawer.form.host" style="width: 90%;"></el-input>
                        </el-col>
                        <el-col :span="4">
                            端口：
                        </el-col>
                        <el-col :span="8">
                            <el-input v-model="updateDrawer.form.port"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="账号：" style="width: 80%;">
                        <el-input v-model="updateDrawer.form.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码：" style="width: 80%;">
                        <el-input v-model="updateDrawer.form.password"></el-input>
                    </el-form-item>
                    <el-form-item label="类型：" style="width: 80%;">
                        <el-radio-group v-model="updateDrawer.form.type">
                            <el-radio label="远程">远程</el-radio>
                            <el-radio label="本地">本地</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <div class="demo-drawer__footer" style="position: fixed;bottom: 10px;right: 20px;">
                    <el-button @click="updateDrawer.show = false">取 消</el-button>
                    <el-button type="primary" @click="updateOne" :loading="loading">{{ loading ? '提交中 ...'
                        : '保 存' }}</el-button>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import { dockerBaseInfo, pingDockerClient, addDockerClient, updateDockerClient, deleteDockerClient } from '../../api/userMG';
export default {
    // 模块名字
    name: "DockerHostManagement",
    // 模块数据
    data() {
        //数据  
        return {
            baseInfo: {},
            search: '',
            fliterStatusData: [],
            addDrawer: {
                show: false,
                form: {
                    name: '',
                    type: '远程',
                    username: '',
                    password: '',
                    host: '',
                    port: '',
                },
            },
            updateDrawer: {
                show: false,
                form: {
                },
            },
        };
    },
    watch: {},
    // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
    methods: {
        getBaseData() {
            dockerBaseInfo().then(res => {
                if (res.code == 0) {
                    this.baseInfo = res.data
                }
            })
        },
        pingClient(row) {
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            console.log(row.key);
            var params = {
                key: row.key
            }
            pingDockerClient(params).then(res => {
                loading.close()
                if (res.code == 0) {
                    this.$message.success("主机Ping通成功！")
                } else {
                    this.$message.error("主机Ping通失败！")
                }

            })
        },
        filterStatus(value, row) {
            return row.status == value
        },
        editDocker(row) {
            this.updateDrawer.form = {
                key: row.key,
                createTime: row.createTime,
                name: row.name,
                host: row.host,
                port: row.port,
                username: row.username,
                password: row.password,
                type: row.type
            }
            this.updateDrawer.show = true
        },
        addOne() {
            addDockerClient(this.addDrawer.form).then(res => {
                if (res.code == 0) {
                    this.$message.success("docker主机添加成功！")
                } else {
                    this.$message.error(res.msg)
                }
                this.addDrawer.show = false
                this.getBaseData()
            })
        },
        updateOne() {
            updateDockerClient(this.updateDrawer.form).then(res => {
                if (res.code == 0) {
                    this.$message.success("docker主机修改成功！")
                } else {
                    this.$message.error(res.msg)
                }
                this.updateDrawer.show = false
                this.getBaseData()
            })
        },
        deleteOne(key) {
            var params = {
                key: key
            }
            deleteDockerClient(params).then(res => {
                if (res.code == 0) {
                    this.$message.success("docker主机删除成功！")
                } else {
                    this.$message.error(res.msg)
                }
                this.getBaseData()
            })
        },
        openOne(row) {
            // this.$router.push({ name: '/host/dockerClientInfo', params: { index: '1' } });
            this.$router.push({ path: '/client/dockerClientInfo?key=' + row.key });
        }

    },
    created() {
        this.getBaseData()
    },
};
</script>
<style scoped>
.cardBox {
    margin-top: 30px;
    width: 95%;
    height: 100%;
    margin-left: 1%;
}

.btnSty {
    margin-left: -1%;
    width: 70px;
}
</style>
